import TableRender from '@/render/TableRender'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import { TabPane, Tabs } from 'ant-design-vue'
import toNative from '@/utils/toNative'
import Drawer from '@/components/drawer/Index'
import type { CompanyInfoDto, CompanyProductInfoDto, PayWageInfoDto, RechargeDto, WesureInfoDto } from '@/api/company/types'
import DetailData from './DetailData'
import BasicInfo from './BasicInfo'
import OpenPlans from './OpenPlans'
import InsuranceRecord from './InsuranceRecord'
import InsuranceCheck from './InsuranceCheck'
// import DataSummary from './DataSummary'
// import SaleRecord from './SaleRecord'
// import PaywageRecord from './PaywageRecord'
import { getPayWageInfo, getWesureInfo } from '@/api/company'
import { DailyGroupInsureCompanyType, DailyProductTypeCnEnum } from '@/const/enum'

@Component
export class DrawerDailyDetail extends TableRender {
    @Prop({ default: false }) show!: boolean
    @Prop() companyId!: number
    @Prop() companyProductInfo!: CompanyProductInfoDto

    showDrawer = false

    activeName = 'basicInfo'

    dailyInfo = {} as WesureInfoDto

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show')
    async handleWatchShow() {
        this.showDrawer = this.show
        if (this.showDrawer) {
            await this.initData()
        }
    }
    @Emit('refresh')
    handleRefresh() {}

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }

    async initData() {
        const res = await getWesureInfo({
            companyId: this.companyId
        })                                                                 
        this.dailyInfo = res
        console.log(11111, res)
    }

    render() {
        return (
            <Drawer
                v-model:show={this.showDrawer}
                size={1080}
                resetStyle={true}
                closable={false}
                hideCancel={true}
                v-slots={{
                    default: () => {
                        return <div class="flex flex-col h-full">
                            <DetailData dailyInfo={this.dailyInfo} companyProductInfo={this.companyProductInfo}/>
                            <Tabs class="flex-1 h-full" v-model:value={this.activeName}>
                                <TabPane key="basicInfo" tab="基本信息">
                                    <BasicInfo dailyInfo={this.dailyInfo} companyProductInfo={this.companyProductInfo} onRefresh={this.initData}/>
                                </TabPane>
                                <TabPane key="data" tab="开通方案">
                                    <OpenPlans dailyInfo={this.dailyInfo}/>
                                </TabPane>
                                <TabPane key="saleInfo" tab="投保记录">
                                    <InsuranceRecord dailyInfo={this.dailyInfo} insureCompanyType={DailyGroupInsureCompanyType.daily} />
                                </TabPane>
                                <TabPane key="paywageRecord" tab="派遣单位">
                                    <InsuranceCheck dailyInfo={this.dailyInfo} insureCompanyType={DailyGroupInsureCompanyType.daily} productType={DailyProductTypeCnEnum.日日保} />
                                </TabPane>
                                <TabPane key="receiptRecord" tab="发票记录">
                                </TabPane>
                            </Tabs>
                        </div>
                    }
                }}
            ></Drawer>
        )
    }
}

export default toNative<{companyId: number, companyProductInfo: CompanyProductInfoDto }, { refresh: () => void }>(DrawerDailyDetail)
